<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css"/>
	</head>
	<body>
		<div id="flow-container">
			<!-- <div class="flow-node">
				<div class="node">
					<div class="node-title">
						提交
					</div>
					<div class="node-content">
						提交人：李飞飞
					</div>
				</div>
				<div class="bottom-v-line">

				</div>
				<div class="add-node-btn">
					<div class="add-btn">
						＋
					</div>
					<div class="add-node-types">
						<div class="node-type-wrap">
							<div class="node-type">
								<div class="node-type-icon">
									<img src="imgs/icon/审批人.png" >
								</div>
								<div class="node-type-name">
									审批人
								</div>
							</div>
						</div>
						<div class="node-type-wrap">
							<div class="node-type">
								<div class="node-type-icon">
									<img src="imgs/icon/抄送人.png" >
								</div>
								<div class="node-type-name">
									抄送人
								</div>
							</div>
						</div>
						<div class="node-type-wrap">
							<div class="node-type">
								<div class="node-type-icon">
									<img src="imgs/icon/办理人.png" >
								</div>
								<div class="node-type-name">
									办理人
								</div>
							</div>
						</div>
						<div class="node-type-wrap">
							<div class="node-type">
								<div class="node-type-icon">
									<img src="imgs/icon/条件分支.png" >
								</div>
								<div class="node-type-name">
									条件分支
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="arrow"></div>
			</div> -->
		</div>


		<!-- <div class="flow-node">
			<div class="node arproval">
				<div class="node-title">
					审批
				</div>
				<div class="node-content">
					提交人：李飞飞
				</div>
			</div>
			<div class="bottom-v-line">

			</div>
			<div class="add-node-btn">
				<div class="add-btn">
					＋
				</div>
			</div>
			<div class="arrow"></div>
		</div>

		<div class="flow-node">
			<div class="node cc">
				<div class="node-title">
					抄送
				</div>
				<div class="node-content">
					提交人：李飞飞
				</div>
			</div>
			<div class="bottom-v-line">

			</div>
			<div class="add-node-btn">
				<div class="add-btn">
					＋
				</div>
			</div>
			<div class="arrow"></div>
		</div>

		<div class="flow-node">
			<div class="node handle">
				<div class="node-title">
					办理
				</div>
				<div class="node-content">
					提交人：李飞飞
				</div>
			</div>
			<div class="bottom-v-line">

			</div>
			<div class="add-node-btn">
				<div class="add-btn">
					＋
				</div>
			</div>
			<div class="arrow"></div>
		</div> -->

	</body>
</html>
<script type="text/javascript">
	class NodeTitle {
		constructor(txt) {
			this.element = document.createElement("div");
			this.element.setAttribute("class", "node-title");
			this.element.innerHTML = txt;
		}

		getElement() {
			return this.element;
		}
	}

	class NodeContent {
		constructor(txt) {
			this.element = document.createElement("div");
			this.element.setAttribute("class", "node-content");
			this.element.innerHTML = txt;
		}

		getElement() {
			return this.element;
		}

		appendChild(obj) {
			this.element.appendChild(ele.getElement());
		}
	}

	class NodeLine {
		constructor() {
			this.element = document.createElement("div");
			this.element.setAttribute("class", "bottom-v-line");
		}

		getElement() {
			return this.element;
		}
	}

	class NodeArrow {
		constructor() {
			this.element = document.createElement("div");
			this.element.setAttribute("class", "arrow");
		}

		getElement() {
			return this.element;
		}
	}

	class NodeAddBtn {
		constructor(flowNode) {
			this.flowNode = flowNode;
			this.addNodeTypeBtns = null;
			this.element = document.createElement("div");
			this.element.setAttribute("class", "add-node-btn");
			let addBtn = document.createElement("div");
			addBtn.setAttribute("class", "add-btn");
			addBtn.innerHTML = "+";
			addBtn.addEventListener('click', (e) => {
				//this.flowNode.addNext();
				this.addNodeTypeBtns.show();
			})
			this.element.appendChild(addBtn);
			
			//挂载添加按钮组
			this.addNodeTypeBtns = new AddNodeTypeBtns(this.flowNode);
			this.appendChild(this.addNodeTypeBtns)
			
		}
		
		appendChild(obj) {
			this.element.appendChild(obj.getElement());
		}

		setFlowNode(flowNode) {
			this.flowNode = flowNode;
		}

		getElement() {
			return this.element;
		}
	}

	class Node {
		constructor(name, type) {
			this.element = document.createElement("div");
			this.element.setAttribute("class", "node " + type);
		}

		appendChild(ele) {
			this.element.appendChild(ele.getElement());
		}

		getElement() {
			return this.element;
		}
	}



	class FlowNode {
		constructor(name, type) {
			this.flowType = type;
			this.name = name;
			this.element = document.createElement("div");
			this.element.setAttribute("class", "flow-node");

			var node = new Node(name, this.flowType);
			var nodeTitle = new NodeTitle(name);
			var nodeContent = new NodeContent("提交人：李飞飞");
			node.appendChild(nodeTitle);
			node.appendChild(nodeContent);
			this.appendChild(node);
			if (type != "end") {
				var nodeLine = new NodeLine();
				var nodeAddBtn = new NodeAddBtn(this);
				var nodeArrow = new NodeArrow();
				this.appendChild(nodeLine);
				this.appendChild(nodeAddBtn);
				this.appendChild(nodeArrow);
				nodeAddBtn.setFlowNode(this);
			}

		}

		addNext(name,type) {
			let current = this.element;
			let parent = current.parentNode;
			let nextNode = current.nextElementSibling;
			console.log("type", type)
			let newFlowNode = new FlowNode(name, type)
			let newElement = newFlowNode.getElement();
			parent.insertBefore(newElement, nextNode);
		}

		getName() {
			return this.name;
		}

		appendChild(ele) {
			this.element.appendChild(ele.getElement());
		}

		getElement() {
			return this.element;
		}
	}

	class ApprovalNode extends FlowNode {
		constructor(name) {
			super(name)
		}
	}
	
	class AddNodeTypeBtns{
		constructor(flowNode) {
			this.flowNode = flowNode;
		    this.addNodeTypesElements = document.createElement("div");
			this.addNodeTypesElements.setAttribute("class","add-node-types");
			this.addNodeTypesElements.appendChild(this._createBtn("审批","imgs/icon/审批人.png",(e)=>{
				this.flowNode.addNext('审批','approval');
				this.hide();
			}))
			this.addNodeTypesElements.appendChild(this._createBtn("抄送人","imgs/icon/抄送人.png",(e)=>{
				this.flowNode.addNext('抄送','cc');
				this.hide();
			}))
			this.addNodeTypesElements.appendChild(this._createBtn("办理人","imgs/icon/办理人.png",(e)=>{
				this.flowNode.addNext('办理','handle');
				this.hide();
			}))
			this.addNodeTypesElements.appendChild(this._createBtn("条件分支","imgs/icon/条件分支.png",(e)=>{
				alert("暂未开放");
			}))
		}
		
		getElement(){
			return this.addNodeTypesElements;
		}
		
		show(){
			this.addNodeTypesElements.style.display="block";
		}
		
		hide(){
			this.addNodeTypesElements.style.display="none";
		}
		
		_createBtn(typeName,iconSrc,clickEventHandle){
			let nodeTypeWrap = this._createElement("div","node-type-wrap");
			if(clickEventHandle){
				nodeTypeWrap.addEventListener('click',clickEventHandle);
			}
			let nodeTypeIcon = this._createElement("div","node-type-icon");
			let img = this._createElement("img");
			img.setAttribute("src",iconSrc);
			let nodeTypeName = this._createElement("div","node-type-name");
			nodeTypeName.innerHTML=typeName;
			nodeTypeIcon.appendChild(img);
			
			let nodeType = this._createElement("div","node-type");
			nodeType.appendChild(nodeTypeIcon);
			nodeType.appendChild(nodeTypeName);
			nodeTypeWrap.appendChild(nodeType);
			return nodeTypeWrap;
		}
		
		_createElement(tagName,className){
			let tag = document.createElement(tagName);
			tag.setAttribute("class",className);
			return tag;
		}
	}

	var startFlowNode = new FlowNode("提交");
	var endFlowNode = new FlowNode("结束", "end");
	document.getElementById("flow-container").appendChild(startFlowNode.getElement())
	document.getElementById("flow-container").appendChild(endFlowNode.getElement())
	
	
</script>
